<!DOCTYPE html>
<!-- saved from url=(0052)https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6 -->
<html lang="en" class=" is-u2f-enabled"><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile#"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    

    <link crossorigin="anonymous" href="SVG 控件 · d3_d3 Wiki_files/frameworks-c07e6f4b02b556d1d85052fb3853caf84c80e6b23dcdb1ae1b00f051da1115a2.css" integrity="sha256-wH5vSwK1VtHYUFL7OFPK+EyA5rI9zbGuGwDwUdoRFaI=" media="all" rel="stylesheet">
    <link crossorigin="anonymous" href="SVG 控件 · d3_d3 Wiki_files/github-09e1c38d593bf8fc6e4c4f1b526d0184e27c433d64963942c1e8c361589f8125.css" integrity="sha256-CeHDjVk7+PxuTE8bUm0BhOJ8Qz1kljlCwejDYVifgSU=" media="all" rel="stylesheet">
    
    
    
    

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width">
    
    <title>SVG 控件 · d3/d3 Wiki</title>
    <link rel="search" type="application/opensearchdescription+xml" href="https://github.com/opensearch.xml" title="GitHub">
    <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
    <link rel="apple-touch-icon" href="https://github.com/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="57x57" href="https://github.com/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="https://github.com/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://github.com/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="https://github.com/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="https://github.com/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="https://github.com/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://github.com/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="https://github.com/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://github.com/apple-touch-icon-180x180.png">
    <meta property="fb:app_id" content="1401488693436528">

      <meta content="https://avatars1.githubusercontent.com/u/1562726?v=3&amp;s=400" name="twitter:image:src"><meta content="@github" name="twitter:site"><meta content="summary" name="twitter:card"><meta content="d3/d3" name="twitter:title"><meta content="d3 - Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:" name="twitter:description">
      <meta content="https://avatars1.githubusercontent.com/u/1562726?v=3&amp;s=400" property="og:image"><meta content="GitHub" property="og:site_name"><meta content="object" property="og:type"><meta content="d3/d3" property="og:title"><meta content="https://github.com/d3/d3" property="og:url"><meta content="d3 - Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:" property="og:description">
      <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
    <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
    <link rel="assets" href="https://assets-cdn.github.com/">
    <style type="text/css"></style><link rel="web-socket" href="wss://live.github.com/_sockets/VjI6MTQyMzUxMDM1OjIwMGE2NDlmZDNhMTY2YTRiYjk1OTFmNjAyMTIyYzk4MTllMDAxMGIyOGE0MzViNGVjMTQ2MzVlZTAwODUxMWU=--dad7d719a40d4af83695525b94991791da5dccf2">
    <meta name="pjax-timeout" content="1000">
    <link rel="sudo-modal" href="https://github.com/sessions/sudo_modal">
    <meta name="request-id" content="E4F8:755C:1B8AD5E:2D2CC92:58845498" data-pjax-transient="">

    <meta name="msapplication-TileImage" content="/windows-tile.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="selected-link" value="repo_wiki" data-pjax-transient="">

    <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
    <meta name="google-analytics" content="UA-3769691-2">

<meta content="collector.githubapp.com" name="octolytics-host"><meta content="github" name="octolytics-app-id"><meta content="E4F8:755C:1B8AD5E:2D2CC92:58845498" name="octolytics-dimension-request_id"><meta content="18323475" name="octolytics-actor-id"><meta content="defenderhhhh" name="octolytics-actor-login"><meta content="70592ef2d225e449076dd88e6b12c145017fd92eccf81e729a16009ced6970cb" name="octolytics-actor-hash">
<meta content="/<user-name>/<repo-name>/wiki/show" data-pjax-transient="true" name="analytics-location">



  <meta class="js-ga-set" name="dimension1" content="Logged In">



        <meta name="hostname" content="github.com">
    <meta name="user-login" content="defenderhhhh">

        <meta name="expected-hostname" content="github.com">
      <meta name="js-proxy-site-detection-payload" content="ZjUxN2QwNjJmY2Q4ZjA1MGU1NjdjMGIwNzQ2N2VlN2UxMDIwMDU1OGY0ZDNiOTc4ZmI2ZTU5ZjdkODg1ODM2Znx7InJlbW90ZV9hZGRyZXNzIjoiMjIyLjE4MC4xNjAuMTU0IiwicmVxdWVzdF9pZCI6IkU0Rjg6NzU1QzoxQjhBRDVFOjJEMkNDOTI6NTg4NDU0OTgiLCJ0aW1lc3RhbXAiOjE0ODUwNjc0MjAsImhvc3QiOiJnaXRodWIuY29tIn0=">


      <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
      <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">

    <meta name="html-safe-nonce" content="7da07f67fa3bc09c6326a894464ac00a14a92cab">

    <meta http-equiv="x-pjax-version" content="94a9cc48ead92329faac49833ac14041">
    

      
  <meta name="description" content="d3 - Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:">
  <meta name="go-import" content="github.com/d3/d3 git https://github.com/d3/d3.git">

  <meta content="1562726" name="octolytics-dimension-user_id"><meta content="d3" name="octolytics-dimension-user_login"><meta content="943149" name="octolytics-dimension-repository_id"><meta content="d3/d3" name="octolytics-dimension-repository_nwo"><meta content="true" name="octolytics-dimension-repository_public"><meta content="false" name="octolytics-dimension-repository_is_fork"><meta content="943149" name="octolytics-dimension-repository_network_root_id"><meta content="d3/d3" name="octolytics-dimension-repository_network_root_nwo">
  <link href="https://github.com/d3/d3/commits/master.atom" rel="alternate" title="Recent Commits to d3:master" type="application/atom+xml">


  </head>


  <body class="logged-in  env-production windows vis-public">
    <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
    <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>

    
    
    



        <div class="header header-logged-in true" role="banner">
  <div class="container clearfix">

    <a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">
  <svg aria-hidden="true" class="octicon octicon-mark-github" height="28" version="1.1" viewBox="0 0 16 16" width="28"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
</a>


        <div class="header-search scoped-search site-scoped-search js-site-search" role="search">
  <!-- '"` --><!-- </textarea></xmp> --><form accept-charset="UTF-8" action="https://github.com/d3/d3/search" class="js-site-search-form" data-scoped-search-url="/d3/d3/search" data-unscoped-search-url="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
    <label class="form-control header-search-wrapper js-chromeless-input-container">
      <div class="header-search-scope">This repository</div>
      <input type="text" class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable" data-hotkey="s" name="q" placeholder="Search" aria-label="Search this repository" data-unscoped-placeholder="Search GitHub" data-scoped-placeholder="Search" autocapitalize="off">
    </label>
</form></div>


      <ul class="header-nav float-left" role="navigation">
        <li class="header-nav-item">
          <a href="https://github.com/pulls" aria-label="Pull requests you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:pulls context:user" data-hotkey="g p" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls">
            Pull requests
</a>        </li>
        <li class="header-nav-item">
          <a href="https://github.com/issues" aria-label="Issues you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:issues context:user" data-hotkey="g i" data-selected-links="/issues /issues/assigned /issues/mentioned /issues">
            Issues
</a>        </li>
          <li class="header-nav-item">
            <a class="header-nav-link" href="https://gist.github.com/" data-ga-click="Header, go to gist, text:gist">Gist</a>
          </li>
      </ul>

    
<ul class="header-nav user-nav float-right" id="user-links">
  <li class="header-nav-item">
    

  </li>

  <li class="header-nav-item dropdown js-menu-container">
    <a class="header-nav-link tooltipped tooltipped-s js-menu-target" href="https://github.com/new" aria-label="Create new…" data-ga-click="Header, create new, icon:add">
      <svg aria-hidden="true" class="octicon octicon-plus float-left" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"></path></svg>
      <span class="dropdown-caret"></span>
    </a>

    <div class="dropdown-menu-content js-menu-content">
      <ul class="dropdown-menu dropdown-menu-sw">
        
<a class="dropdown-item" href="https://github.com/new" data-ga-click="Header, create new repository">
  New repository
</a>

  <a class="dropdown-item" href="https://github.com/new/import" data-ga-click="Header, import a repository">
    Import repository
  </a>

<a class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, create new gist">
  New gist
</a>

  <a class="dropdown-item" href="https://github.com/organizations/new" data-ga-click="Header, create new organization">
    New organization
  </a>



  <div class="dropdown-divider"></div>
  <div class="dropdown-header">
    <span title="d3/d3">This repository</span>
  </div>
    <a class="dropdown-item" href="https://github.com/d3/d3/issues/new" data-ga-click="Header, create new issue">
      New issue
    </a>

      </ul>
    </div>
  </li>

  <li class="header-nav-item dropdown js-menu-container">
    <a class="header-nav-link name tooltipped tooltipped-sw js-menu-target" href="https://github.com/defenderhhhh" aria-label="View profile and more" data-ga-click="Header, show menu, icon:avatar">
      <img alt="@defenderhhhh" class="avatar" height="20" src="SVG 控件 · d3_d3 Wiki_files/18323475" width="20">
      <span class="dropdown-caret"></span>
    </a>

    <div class="dropdown-menu-content js-menu-content">
      <div class="dropdown-menu dropdown-menu-sw">
        <div class="dropdown-header header-nav-current-user css-truncate">
          Signed in as <strong class="css-truncate-target">defenderhhhh</strong>
        </div>

        <div class="dropdown-divider"></div>

        <a class="dropdown-item" href="https://github.com/defenderhhhh" data-ga-click="Header, go to profile, text:your profile">
          Your profile
        </a>
        <a class="dropdown-item" href="https://github.com/defenderhhhh?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">
          Your stars
        </a>
        <a class="dropdown-item" href="https://github.com/explore" data-ga-click="Header, go to explore, text:explore">
          Explore
        </a>
          <a class="dropdown-item" href="https://github.com/integrations" data-ga-click="Header, go to integrations, text:integrations">
            Integrations
          </a>
        <a class="dropdown-item" href="https://help.github.com/" data-ga-click="Header, go to help, text:help">
          Help
        </a>

        <div class="dropdown-divider"></div>

        <a class="dropdown-item" href="https://github.com/settings/profile" data-ga-click="Header, go to settings, icon:settings">
          Settings
        </a>

        <!-- '"` --><!-- </textarea></xmp> --><form accept-charset="UTF-8" action="https://github.com/logout" class="logout-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="cd7Hm4oOjUrY/mu3NuyPlIqc41UU9bSmSdrCsFwgJfCbTLpIUAFZrWkaDpkICTgnr5VCdEQ7J72F8F5yjHNbbw=="></div>
          <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
            Sign out
          </button>
</form>      </div>
    </div>
  </li>
</ul>


    
  </div>
</div>


      


    <div id="start-of-content" class="accessibility-aid"></div>

      <div id="js-flash-container">
</div>


    <div role="main">
        <div itemscope="" itemtype="http://schema.org/SoftwareSourceCode">
    <div id="js-repo-pjax-container" data-pjax-container="">
      
<div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav">
  <div class="container repohead-details-container">

    

<ul class="pagehead-actions">

  <li>
        <!-- '"` --><!-- </textarea></xmp> --><form accept-charset="UTF-8" action="https://github.com/notifications/subscribe" class="js-social-container" data-autosubmit="true" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="wfefqDzKDb29byMLNTMXeUJUAIOqyUojTZv/n3bUFLRzZ/yj21+LOSfCG7dLHT6ZcBmjBiEwyUwdkwgWPx0B5Q=="></div>      <input class="form-control" id="repository_id" name="repository_id" type="hidden" value="943149">

        <div class="select-menu js-menu-container js-select-menu">
          <a href="https://github.com/d3/d3/subscription" class="btn btn-sm btn-with-count select-menu-button js-menu-target" role="button" tabindex="0" aria-haspopup="true" data-ga-click="Repository, click Watch settings, action:wiki#show">
            <span class="js-select-button">
              <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
              Watch
            </span>
          </a>
          <a class="social-count js-social-count" href="https://github.com/d3/d3/watchers" aria-label="2939 users are watching this repository">
            2,939
          </a>

        <div class="select-menu-modal-holder">
          <div class="select-menu-modal subscription-menu-modal js-menu-content" aria-hidden="true">
            <div class="select-menu-header js-navigation-enable" tabindex="-1">
              <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path></svg>
              <span class="select-menu-title">Notifications</span>
            </div>

              <div class="select-menu-list js-navigation-container" role="menu">

                <div class="select-menu-item js-navigation-item selected" role="menuitem" tabindex="0">
                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"></path></svg>
                  <div class="select-menu-item-text">
                    <input checked="checked" id="do_included" name="do" type="radio" value="included">
                    <span class="select-menu-item-heading">Not watching</span>
                    <span class="description">Be notified when participating or @mentioned.</span>
                    <span class="js-select-button-text hidden-select-button-text">
                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
                      Watch
                    </span>
                  </div>
                </div>

                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"></path></svg>
                  <div class="select-menu-item-text">
                    <input id="do_subscribed" name="do" type="radio" value="subscribed">
                    <span class="select-menu-item-heading">Watching</span>
                    <span class="description">Be notified of all conversations.</span>
                    <span class="js-select-button-text hidden-select-button-text">
                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
                      Unwatch
                    </span>
                  </div>
                </div>

                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"></path></svg>
                  <div class="select-menu-item-text">
                    <input id="do_ignore" name="do" type="radio" value="ignore">
                    <span class="select-menu-item-heading">Ignoring</span>
                    <span class="description">Never be notified.</span>
                    <span class="js-select-button-text hidden-select-button-text">
                      <svg aria-hidden="true" class="octicon octicon-mute" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"></path></svg>
                      Stop ignoring
                    </span>
                  </div>
                </div>

              </div>

            </div>
          </div>
        </div>
</form>
  </li>

  <li>
      <div class="js-toggler-container js-social-container starring-container ">
    <!-- '"` --><!-- </textarea></xmp> --><form accept-charset="UTF-8" action="https://github.com/d3/d3/unstar" class="starred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="bPt0fGBNr90fyWqpHbk6j6nY48uNVrU3Ky6GgUlSNkHbuNfLRKCQfTaep8H8L0bnefvjybJGYtMlfmtYzLIgqw=="></div>
      <button type="submit" class="btn btn-sm btn-with-count js-toggler-target" aria-label="Unstar this repository" title="Unstar d3/d3" data-ga-click="Repository, click unstar button, action:wiki#show; text:Unstar">
        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
        Unstar
      </button>
        <a class="social-count js-social-count" href="https://github.com/d3/d3/stargazers" aria-label="59436 users starred this repository">
          59,436
        </a>
</form>
    <!-- '"` --><!-- </textarea></xmp> --><form accept-charset="UTF-8" action="https://github.com/d3/d3/star" class="unstarred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="sxJ3k+Byu/iaWJN+ZgbhogJoHEcHZDbI20FMoXK2cW1mBDIUW59Jtl7/Oac3ApSPtB1ULD+i6gMyyltEnYftoQ=="></div>
      <button type="submit" class="btn btn-sm btn-with-count js-toggler-target" aria-label="Star this repository" title="Star d3/d3" data-ga-click="Repository, click star button, action:wiki#show; text:Star">
        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
        Star
      </button>
        <a class="social-count js-social-count" href="https://github.com/d3/d3/stargazers" aria-label="59436 users starred this repository">
          59,436
        </a>
</form>  </div>

  </li>

  <li>
          <!-- '"` --><!-- </textarea></xmp> --><form accept-charset="UTF-8" action="https://github.com/d3/d3/fork" class="btn-with-count" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="u5GNMafkUfMA3giEQAwheNj/nTdqaP0ecRpRicpBN0Fd6yOd582zhkA58CsBS4BD56QRZpun5/JXQA35ykWahQ=="></div>
            <button type="submit" class="btn btn-sm btn-with-count" data-ga-click="Repository, show fork modal, action:wiki#show; text:Fork" title="Fork your own copy of d3/d3 to your account" aria-label="Fork your own copy of d3/d3 to your account">
              <svg aria-hidden="true" class="octicon octicon-repo-forked" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
              Fork
            </button>
</form>
    <a href="https://github.com/d3/d3/network" class="social-count" aria-label="15846 users forked this repository">
      15,846
    </a>
  </li>
</ul>

    <h1 class="public ">
  <svg aria-hidden="true" class="octicon octicon-repo" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
  <span class="author" itemprop="author"><a href="https://github.com/d3" class="url fn" rel="author">d3</a></span><!--
--><span class="path-divider">/</span><!--
--><strong itemprop="name"><a href="https://github.com/d3/d3" data-pjax="#js-repo-pjax-container">d3</a></strong>

</h1>

  </div>
  <div class="container">
    
<nav class="reponav js-repo-nav js-sidenav-container-pjax" itemscope="" itemtype="http://schema.org/BreadcrumbList" role="navigation" data-pjax="#js-repo-pjax-container">

  <span itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement">
    <a href="https://github.com/d3/d3" class="js-selected-navigation-item reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches /d3/d3" itemprop="url">
      <svg aria-hidden="true" class="octicon octicon-code" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
      <span itemprop="name">Code</span>
      <meta itemprop="position" content="1">
</a>  </span>

    <span itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a href="https://github.com/d3/d3/issues" class="js-selected-navigation-item reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /d3/d3/issues" itemprop="url">
        <svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
        <span itemprop="name">Issues</span>
        <span class="counter">0</span>
        <meta itemprop="position" content="2">
</a>    </span>

  <span itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement">
    <a href="https://github.com/d3/d3/pulls" class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls /d3/d3/pulls" itemprop="url">
      <svg aria-hidden="true" class="octicon octicon-git-pull-request" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
      <span itemprop="name">Pull requests</span>
      <span class="counter">0</span>
      <meta itemprop="position" content="3">
</a>  </span>

  <a href="https://github.com/d3/d3/projects" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /d3/d3/projects">
    <svg aria-hidden="true" class="octicon octicon-project" height="16" version="1.1" viewBox="0 0 15 16" width="15"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg>
    Projects
    <span class="counter">0</span>
</a>
    <a href="https://github.com/d3/d3/wiki" class="js-selected-navigation-item selected reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /d3/d3/wiki">
      <svg aria-hidden="true" class="octicon octicon-book" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"></path></svg>
      Wiki
</a>

  <a href="https://github.com/d3/d3/pulse" class="js-selected-navigation-item reponav-item" data-selected-links="pulse /d3/d3/pulse">
    <svg aria-hidden="true" class="octicon octicon-pulse" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M11.5 8L8.8 5.4 6.6 8.5 5.5 1.6 2.38 8H0v2h3.6l.9-1.8.9 5.4L9 8.5l1.6 1.5H14V8z"></path></svg>
    Pulse
</a>
  <a href="https://github.com/d3/d3/graphs" class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors /d3/d3/graphs">
    <svg aria-hidden="true" class="octicon octicon-graph" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"></path></svg>
    Graphs
</a>

</nav>

  </div>
</div>

<div class="container new-discussion-timeline experiment-repo-nav">
  <div class="repository-content">

    

<div id="wiki-wrapper" class="wiki-wrapper page">
<div class="gh-header">
  <div class="gh-header-show">
        <div class="gh-header-actions">
          <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6/_edit" class="btn btn-sm ">Edit</a>
          <a href="https://github.com/d3/d3/wiki/_new" class="btn btn-sm btn-primary">New Page</a>
        </div>
    <h1 class="gh-header-title instapaper_title">SVG 控件</h1>
      <div class="gh-header-meta">
        Howard Liang edited this page <relative-time datetime="2016-03-03T19:38:59Z" title="2016年3月4日 GMT+8上午3:38">on 4 Mar 2016</relative-time>
        ·
        <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6/_history" class="history">
          2 revisions
        </a>
      </div>
  </div>
</div>
<div id="wiki-content" class="wiki-content">
  <div class="has-rightbar">

  <div id="wiki-rightbar" class="wiki-rightbar">
    <div class="wiki-pages-box readability-sidebar boxed-group flush js-wiki-pages-box " role="navigation">
      
<h3 class="js-wiki-toggle-collapse wiki-auxiliary-content">
  <svg aria-hidden="true" class="octicon octicon-triangle-down caret-expanded" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M0 5l6 6 6-6z"></path></svg>
  <svg aria-hidden="true" class="octicon octicon-triangle-right caret-collapsed" height="16" version="1.1" viewBox="0 0 6 16" width="6"><path fill-rule="evenodd" d="M0 14l6-6-6-6z"></path></svg>
  Pages <span class="counter">116</span>
</h3>
<div class="boxed-group-inner wiki-auxiliary-content wiki-auxiliary-content-no-bg">
    <div class="filter-bar">
      <input type="text" id="wiki-pages-filter" class="form-control input-sm input-block js-filterable-field" placeholder="Find a Page…" aria-label="Find a Page…" tabindex="2">
    </div>

  <ul class="wiki-pages" data-filterable-for="wiki-pages-filter" data-filterable-type="substring">
    <li>
      <strong><a href="https://github.com/d3/d3/wiki" class="wiki-page-link">Home</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/3.0" class="wiki-page-link">3.0</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/3.1" class="wiki-page-link">3.1</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C" class="wiki-page-link">API  中文手册</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/API-Reference" class="wiki-page-link">API Reference</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/API-Reference-(%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%BE%D1%8F%D0%B7%D1%8B%D1%87%D0%BD%D0%B0%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D1%8F)" class="wiki-page-link">API Reference (русскоязычная версия)</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/API-%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9" class="wiki-page-link">API リファレンス</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/Arrays" class="wiki-page-link">Arrays</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/Behaviors" class="wiki-page-link">Behaviors</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/Bundle-Layout" class="wiki-page-link">Bundle Layout</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/Chord-Layout" class="wiki-page-link">Chord Layout</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/Cluster-Layout" class="wiki-page-link">Cluster Layout</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/CN-Home" class="wiki-page-link">CN Home</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/Colors" class="wiki-page-link">Colors</a></strong>
    </li>
    <li>
      <strong><a href="https://github.com/d3/d3/wiki/Core" class="wiki-page-link">Core</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/CSV" class="wiki-page-link">CSV</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/CSV%E6%A0%BC%E5%BC%8F%E5%8C%96" class="wiki-page-link">CSV格式化</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Drag-Behavior" class="wiki-page-link">Drag Behavior</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Force-Layout" class="wiki-page-link">Force Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Formatting" class="wiki-page-link">Formatting</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Gallery" class="wiki-page-link">Gallery</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Geo" class="wiki-page-link">Geo</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Geo-Paths" class="wiki-page-link">Geo Paths</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Geo-Projections" class="wiki-page-link">Geo Projections</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Geo-Streams" class="wiki-page-link">Geo Streams</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Geometry" class="wiki-page-link">Geometry</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Hierarchy-Layout" class="wiki-page-link">Hierarchy Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Histogram-Layout" class="wiki-page-link">Histogram Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Hull-Geom" class="wiki-page-link">Hull Geom</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/ID-Home" class="wiki-page-link">ID Home</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Internals" class="wiki-page-link">Internals</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/JP-3.0" class="wiki-page-link">JP 3.0</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/JP-API-Reference" class="wiki-page-link">JP API Reference</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/JP-Home" class="wiki-page-link">JP Home</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/JP-Tutorials" class="wiki-page-link">JP Tutorials</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Layouts" class="wiki-page-link">Layouts</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Learning-paths" class="wiki-page-link">Learning paths</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Localization" class="wiki-page-link">Localization</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Math" class="wiki-page-link">Math</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Namespaces" class="wiki-page-link">Namespaces</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Ordinal-Scales" class="wiki-page-link">Ordinal Scales</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Pack-Layout" class="wiki-page-link">Pack Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Partition-Layout" class="wiki-page-link">Partition Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Pie-Layout" class="wiki-page-link">Pie Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Plugins" class="wiki-page-link">Plugins</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Polygon-Geom" class="wiki-page-link">Polygon Geom</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Quadtree-Geom" class="wiki-page-link">Quadtree Geom</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Quantitative-Scales" class="wiki-page-link">Quantitative Scales</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Release-Notes" class="wiki-page-link">Release Notes</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Requests" class="wiki-page-link">Requests</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Scales" class="wiki-page-link">Scales</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Selection-(russians)" class="wiki-page-link">Selection (russians)</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Selections" class="wiki-page-link">Selections</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Stack-Layout" class="wiki-page-link">Stack Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG" class="wiki-page-link">SVG</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG-Axes" class="wiki-page-link">SVG Axes</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG-Controls" class="wiki-page-link">SVG Controls</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG-Events" class="wiki-page-link">SVG Events</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG-Shapes" class="wiki-page-link">SVG Shapes</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG-%E5%BD%A2%E7%8A%B6" class="wiki-page-link">SVG 形状</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="SVG 控件 · d3_d3 Wiki_files/SVG 控件 · d3_d3 Wiki.html" class="wiki-page-link">SVG 控件</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG-%E8%BD%B4" class="wiki-page-link">SVG 轴</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/SVG%E5%87%BD%E6%95%B0" class="wiki-page-link">SVG函数</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Time" class="wiki-page-link">Time</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Time-Formatting" class="wiki-page-link">Time Formatting</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Time-Intervals" class="wiki-page-link">Time Intervals</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Time-Scales" class="wiki-page-link">Time Scales</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Transitions" class="wiki-page-link">Transitions</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Tree-Layout" class="wiki-page-link">Tree Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Treemap-Layout" class="wiki-page-link">Treemap Layout</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Tutorials" class="wiki-page-link">Tutorials</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/TW-Home" class="wiki-page-link">TW Home</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Upgrading-to-3.0" class="wiki-page-link">Upgrading to 3.0</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Voronoi-Geom" class="wiki-page-link">Voronoi Geom</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/Zoom-Behavior" class="wiki-page-link">Zoom Behavior</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%D0%92%D1%8B%D0%B1%D0%BE%D1%80%D0%BA%D0%B8" class="wiki-page-link">Выборки</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%86%85%E9%83%A8" class="wiki-page-link">内部</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%87%A0%E4%BD%95" class="wiki-page-link">几何</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%88%86%E5%8C%BA%E5%B8%83%E5%B1%80" class="wiki-page-link">分区布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%8A%9B%E5%B8%83%E5%B1%80" class="wiki-page-link">力布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%8C%85%E5%B8%83%E5%B1%80" class="wiki-page-link">包布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4" class="wiki-page-link">命名空间</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%9B%9B%E5%8F%89%E6%A0%91" class="wiki-page-link">四叉树</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%9C%B0%E7%90%86" class="wiki-page-link">地理</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%9C%B0%E7%90%86%E6%8A%95%E5%BD%B1" class="wiki-page-link">地理投影</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%9C%B0%E7%90%86%E8%B7%AF%E5%BE%84" class="wiki-page-link">地理路径</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%A0%86%E5%8F%A0%E5%B8%83%E5%B1%80" class="wiki-page-link">堆叠布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%A4%9A%E8%BE%B9%E5%BD%A2" class="wiki-page-link">多边形</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%B1%82%E6%AC%A1%E5%B8%83%E5%B1%80" class="wiki-page-link">层次布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%B8%83%E5%B1%80" class="wiki-page-link">布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%BA%8F%E6%95%B0%E6%AF%94%E4%BE%8B%E5%B0%BA" class="wiki-page-link">序数比例尺</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E5%BC%A6%E5%B8%83%E5%B1%80" class="wiki-page-link">弦布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%8B%96%E5%8A%A8" class="wiki-page-link">拖动</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%8D%86%E5%B8%83%E5%B1%80" class="wiki-page-link">捆布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%8D%86%E7%BB%91%E5%B8%83%E5%B1%80" class="wiki-page-link">捆绑布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA" class="wiki-page-link">数值比例尺</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%95%B0%E5%AD%A6" class="wiki-page-link">数学</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%95%B0%E7%BB%84" class="wiki-page-link">数组</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%97%B6%E9%97%B4%E6%AF%94%E4%BE%8B%E5%B0%BA" class="wiki-page-link">时间比例尺</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%9C%AC%E5%9C%B0%E5%8C%96" class="wiki-page-link">本地化</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%A0%91%E5%B8%83%E5%B1%80" class="wiki-page-link">树布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%A0%B8%E5%BF%83%E5%87%BD%E6%95%B0" class="wiki-page-link">核心函数</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%A0%BC%E5%BC%8F%E5%8C%96" class="wiki-page-link">格式化</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%AF%94%E4%BE%8B%E5%B0%BA" class="wiki-page-link">比例尺</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E6%B3%B0%E6%A3%AE%E5%A4%9A%E8%BE%B9%E5%BD%A2" class="wiki-page-link">泰森多边形</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E7%9B%B4%E6%96%B9%E5%9B%BE%E5%B8%83%E5%B1%80" class="wiki-page-link">直方图布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E7%9F%A9%E5%BD%A2%E6%A0%91%E5%B8%83%E5%B1%80" class="wiki-page-link">矩形树布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E7%B0%87%E5%B8%83%E5%B1%80" class="wiki-page-link">簇布局</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E7%BC%A9%E6%94%BE" class="wiki-page-link">缩放</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E8%A1%8C%E4%B8%BA" class="wiki-page-link">行为</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E8%AF%B7%E6%B1%82" class="wiki-page-link">请求</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E8%B5%AB%E5%B0%94" class="wiki-page-link">赫尔</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E8%BF%87%E6%B8%A1" class="wiki-page-link">过渡</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8" class="wiki-page-link">选择器</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E9%A2%9C%E8%89%B2" class="wiki-page-link">颜色</a></strong>
    </li>
    <li class="wiki-more-pages">
      <strong><a href="https://github.com/d3/d3/wiki/%E9%A5%BC%E5%B8%83%E5%B1%80" class="wiki-page-link">饼布局</a></strong>
    </li>
    <li class="wiki-more-pages-link">
      <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#" class="js-wiki-more-pages-link">
        Show 101 more pages…
      </a>
    </li>
  </ul>
</div>

    </div>


    <div class="clone-url">
      <h5>Clone this wiki locally</h5>
      <div class="input-group js-zeroclipboard-container">
        <input type="text" class="form-control input-sm text-small text-gray input-monospace js-url-field js-zeroclipboard-target" aria-label="Clone URL for this wiki" value="https://github.com/d3/d3.wiki.git" readonly="readonly">
        <span class="input-group-button">
          <button aria-label="Copy to clipboard" class="js-zeroclipboard btn btn-sm zeroclipboard-button tooltipped tooltipped-s" data-copied-hint="Copied!" type="button"><svg aria-hidden="true" class="octicon octicon-clippy" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg></button>
        </span>
      </div>


        <a href="https://windows.github.com/" class="btn btn-sm sidebar-button" title="Save this wiki to your computer and use it in GitHub Desktop." aria-label="Save this wiki to your computer and use it in GitHub Desktop.">
          <svg aria-hidden="true" class="octicon octicon-desktop-download" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 6h3V0h2v6h3l-4 4-4-4zm11-4h-4v1h4v8H1V3h4V2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z"></path></svg>
          Clone in Desktop
        </a>
    </div>
  </div>

  <div id="wiki-body" class="wiki-body gollum-markdown-content instapaper_body">
      <div class="markdown-body">
        <blockquote>
<p><a href="https://github.com/d3/d3/wiki/Home">Wiki</a> ▸ <a class="internal present" href="https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C">API--中文手册</a> ▸ <a class="internal present" href="https://github.com/d3/d3/wiki/SVG%E5%87%BD%E6%95%B0">SVG函数</a> ▸ <strong>SVG 控件</strong></p>
</blockquote>

<ul>
<li>本文档是D3官方文档中文翻译，并保持与<a href="https://github.com/mbostock/d3/wiki/API-Reference">最新版</a>同步。</li>
<li>如发现翻译不当或有其他问题可以通过以下方式联系译者:</li>
<li>邮箱：<a href="mailto:zhang_tianxu@sina.com">zhang_tianxu@sina.com</a>
</li>
<li>QQ群：<a href="http://jq.qq.com/?_wv=1027&amp;k=ZGcqYF">D3数据可视化</a>205076374，<a href="http://jq.qq.com/?_wv=1027&amp;k=S8wGMe">大数据可视化</a>436442115</li>
</ul>

<h2>
<a id="user-content-刷子" class="anchor" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#%E5%88%B7%E5%AD%90" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>刷子</h2>

<p><a href="http://bl.ocks.org/mbostock/6452972"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f363435323937322f7468756d626e61696c2e706e67" alt="6452972" data-canonical-src="http://bl.ocks.org/mbostock/raw/6452972/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/4063663"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f343036333636332f7468756d626e61696c2e706e67" alt="4063663" data-canonical-src="http://bl.ocks.org/mbostock/raw/4063663/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/6232620"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f363233323632302f7468756d626e61696c2e706e67" alt="6232620" data-canonical-src="http://bl.ocks.org/mbostock/raw/6232620/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/6232537"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f363233323533372f7468756d626e61696c2e706e67" alt="6232537" data-canonical-src="http://bl.ocks.org/mbostock/raw/6232537/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/6216724"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f363231363732342f7468756d626e61696c2e706e67" alt="6216724" data-canonical-src="http://bl.ocks.org/mbostock/raw/6216724/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/4560481"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f343536303438312f7468756d626e61696c2e706e67" alt="4560481" data-canonical-src="http://bl.ocks.org/mbostock/raw/4560481/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/4565798"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f343536353739382f7468756d626e61696c2e706e67" alt="4565798" data-canonical-src="http://bl.ocks.org/mbostock/raw/4565798/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/4349545"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f343334393534352f7468756d626e61696c2e706e67" alt="4349545" data-canonical-src="http://bl.ocks.org/mbostock/raw/4349545/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/4349509"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f343334393530392f7468756d626e61696c2e706e67" alt="4349509" data-canonical-src="http://bl.ocks.org/mbostock/raw/4349509/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/4343214"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f343334333231342f7468756d626e61696c2e706e67" alt="4343214" data-canonical-src="http://bl.ocks.org/mbostock/raw/4343214/thumbnail.png"></a>
<a href="http://bl.ocks.org/mbostock/1667367"><img src="SVG 控件 · d3_d3 Wiki_files/687474703a2f2f626c2e6f636b732e6f72672f6d626f73746f636b2f7261772f313636373336372f7468756d626e61696c2e706e67" alt="1667367" data-canonical-src="http://bl.ocks.org/mbostock/raw/1667367/thumbnail.png"></a></p>

<p><a name="user-content-brush" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush">#</a> d3.svg.<b>brush</b>()</p>

<p>构造一个新的刷子，使用默认的 <em>x</em> 和 <em>y</em> 比例尺，和空的范围(extent)。</p>

<p><a name="user-content-_brush" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#_brush">#</a> <b>brush</b>(<i>selection</i>)</p>

<p>绘制或重绘当前brush拖选到指定的选择元素<em>selection</em>；brush可以同时绘制多个元素，值得注意的是，这些选择刷会共用相同的背景范围；通常一个选择刷一个时间只能绘制一个元素；<em>selection</em> 参数可以是一个过渡变换(<a href="https://github.com/d3/d3/wiki/%E8%BF%87%E6%B8%A1">transition</a>)，在这种情况下，选择刷将执行自动变换(<a href="http://bl.ocks.org/mbostock/6216724" title="http://bl.ocks.org/mbostock/6216724">automatic transition</a>)；可以使用 <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_event">brush.event</a> 来触发选择刷事件在动画刷的变换过程中。</p>

<p><a name="user-content-brush_x" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_x">#</a> brush.<b>x</b>([<i>scale</i>])</p>

<p>获取或设置选择刷相关联的 <em>x</em> 比例尺；如果指定 <em>scale</em> ，则设置 <em>x</em> 比例尺为指定的scale 并返回brush，如果未指定 <em>scale</em> ，则返回当前的x比例尺，默认为null；变换通常可指定为<a href="https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA">数值比例尺</a>，在这种情况下，范围 <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#extent">extent</a> 处于比例尺域 <a href="https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA#linear_domain">domain</a>
 的数据空间；然而，它也可以被定义为<a href="https://github.com/d3/d3/wiki/%E5%BA%8F%E6%95%B0%E6%AF%94%E4%BE%8B%E5%B0%BA">序数比例尺</a>代替，这时，范围extent来自于比例尺的的<a href="https://github.com/d3/d3/wiki/%E5%BA%8F%E6%95%B0%E6%AF%94%E4%BE%8B%E5%B0%BA#ordinal_rangeExtent">range extent</a>的像素空间。</p>

<p><a name="user-content-brush_y" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_y">#</a> brush.<b>y</b>([<i>scale</i>])</p>

<p>获取或设置选择刷相关联的<em>y</em>比例尺；如果指定<em>scale</em> ，则设置<em>y</em>比例尺为指定的scale 并返回brush，如果未指定<em>scale</em> ，则返回当前的<em>y</em>比例尺，默认为<code>null</code>；比例尺通常可指定为<a href="https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA">数值比例尺</a>，在这种情况下，<a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#extent">extent</a> 是来自于比例尺域 <a href="https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA#linear_domain">domain</a> 的数据空间；然而，它也可以被定义为<a href="https://github.com/d3/d3/wiki/%E5%BA%8F%E6%95%B0%E6%AF%94%E4%BE%8B%E5%B0%BA">序数比例尺</a>代替，这时，范围extent来自于变换的<a href="https://github.com/d3/d3/wiki/%E5%BA%8F%E6%95%B0%E6%AF%94%E4%BE%8B%E5%B0%BA#ordinal_rangeExtent">range extent</a>的像素区间。</p>

<p><a name="user-content-brush_extent" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_extent">#</a> brush.<b>extent</b>([<i>values</i>])</p>

<p>获取或设置当前选择刷的范围，如果指定<em>values</em>，则设置范围为指定的值并返回当前brush；如果未指定<em>values</em>，则返回当前的范围；范围的定义依赖于关联的比例尺；如果<em>x</em>和<em>y</em>比例尺都可用，范围是一个二维的数组：[[<em>x0</em>, <em>y0</em>], [<em>x1</em>, <em>y1</em>]]，<em>x0</em>和<em>y0</em>是范围的最低端，<em>x1</em>和<em>y1</em>是范围的最顶端；如果只有<em>x</em>比例尺可用，范围被定义为一维数组：[<em>x0</em>, <em>x1</em>]，同样地，如果只有<em>y</em>变换可用，范围被定义为：[<em>y0</em>, <em>y1</em>]；如果没有变换可用，范围为<code>null</code>。</p>

<p>当范围被设定为指定的值<em>values</em>，所得到的范围会被正确的保存起来；然而，一旦选择刷被用户移动（鼠标按下并拖动），这时，范围必须要调用 <a href="https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA#linear_invert">scale.invert</a>来重新计算；注意，在这种情况下，值可能由于像素的精度有限而略有偏差。</p>

<p>注意，这并不会自动重绘选择刷或触发任何的监听事件；想要重绘选择刷，可以在选择器或过渡上调用 <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#_brush">brush</a> ，想要触发事件，使用 <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_event">brush.event</a>。</p>

<p><a name="user-content-brush_clamp" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_clamp">#</a> brush.<b>clamp</b>([<i>clamp</i>])</p>

<p>设置或获取当前的夹选行为，如果指定<em>clamp</em>，则设置夹选行为为指定值并返回brush，如果未指定<em>clamp</em>，则返回当前的行为；夹选行为的定义依赖于关联的比例尺；如果<em>x</em>和<em>y</em>比例尺都可用，夹选行为是一个数组[<em>x</em>,<em>y</em>]，<em>x</em>和<em>y</em>是布尔类型，用来确定是否二维范围内每个维度应该被夹选到各自的<em>x</em>和<em>y</em>比例尺；如果只有<em>x</em>或<em>y</em>比例尺可用，夹选行为是一个布尔类型，用来指定是否一维范围该被夹选到比例尺，如果变换都不可用，则夹选行为是<code>null</code>。</p>

<p><a name="user-content-brush_clear" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_clear">#</a> brush.<b>clear</b>()</p>

<p>清空范围，使得brush的范围为 <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_empty">empty</a>。</p>

<p><a name="user-content-brush_empty" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_empty">#</a> brush.<b>empty</b>()</p>

<p>当且仅当选择刷的范围为空时，返回<code>true</code>；当brush被创建时，被初始化为空；当点击背景而不移动时，或者范围被<a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_clear">清除</a>，选择刷会变为空的；如果选择刷有零宽度或零高度，它将被视为空；当选择刷为空，则它的范围即视为未定义。</p>

<p><a name="user-content-brush_on" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_on">#</a> brush.<b>on</b>(<i>type</i>[, <i>listener</i>])</p>

<p>设置或获取指定类型 <em>type</em> 的监听器 <em>listener</em> ；选择刷支持三种类型事件：</p>

<ul>
<li>
<em>brushstart</em>  - 鼠标按下时，即mousedown；</li>
<li>
<em>brush</em>  - 鼠标移动时，如果范围在改变，即mousemove；</li>
<li>
<em>brushend</em> – 鼠标弹起/松开时，即mouseup； </li>
</ul>

<p>需要注意，当鼠标在背景上点击时也会触发"brush"事件，因为选择刷范围会立刻被清除来开始一段新的范围。</p>

<p><a name="user-content-brush_event" href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_event">#</a> brush.<b>event</b>(<i>selection</i>)</p>

<p>如果 <em>selection</em> 是选择器，立刻触发brush行为到注册的监听器，即三个事件序列： <em>brushstart</em>, <em>brush</em> 和 <em>brushend</em>；这是非常有用的，在设置完 <a href="https://github.com/d3/d3/wiki/SVG-%E6%8E%A7%E4%BB%B6#brush_extent">brush extent</a> 后来触发相应的事件；如果 <em>selection</em> 是一个过渡，注册合适的补间动画，这样在过渡的过程中来触发事件：当过渡开始于初始设置范围时触发<em>brushstart</em> ，过渡进行期间每刻都会触发<em>brush</em> ，过渡结束时触发<em>brushend</em> ；需要注意，当用户开始刷时，即使过渡没结束也会被立刻终止(<a href="https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8#interrupt">interrupted</a>)。</p>

<ul>
<li>魏飞译 2014-07-25 19:25 咕噜校对 2014-11-29 20:06:46</li>
</ul>

      </div>

  </div>
  </div>
</div>
</div>


  </div>
  <div class="modal-backdrop js-touch-events"></div>
</div>


    </div>
  </div>

    </div>

        <div class="container site-footer-container">
  <div class="site-footer" role="contentinfo">
    <ul class="site-footer-links float-right">
        <li><a href="https://github.com/contact" data-ga-click="Footer, go to contact, text:contact">Contact GitHub</a></li>
      <li><a href="https://developer.github.com/" data-ga-click="Footer, go to api, text:api">API</a></li>
      <li><a href="https://training.github.com/" data-ga-click="Footer, go to training, text:training">Training</a></li>
      <li><a href="https://shop.github.com/" data-ga-click="Footer, go to shop, text:shop">Shop</a></li>
        <li><a href="https://github.com/blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
        <li><a href="https://github.com/about" data-ga-click="Footer, go to about, text:about">About</a></li>

    </ul>

    <a href="https://github.com/" aria-label="Homepage" class="site-footer-mark" title="GitHub">
      <svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
</a>
    <ul class="site-footer-links">
      <li>© 2017 <span title="0.20745s from github-fe133-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
        <li><a href="https://github.com/site/terms" data-ga-click="Footer, go to terms, text:terms">Terms</a></li>
        <li><a href="https://github.com/site/privacy" data-ga-click="Footer, go to privacy, text:privacy">Privacy</a></li>
        <li><a href="https://github.com/security" data-ga-click="Footer, go to security, text:security">Security</a></li>
        <li><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
        <li><a href="https://help.github.com/" data-ga-click="Footer, go to help, text:help">Help</a></li>
    </ul>
  </div>
</div>



    

    <div id="ajax-error-message" class="ajax-error-message flash flash-error">
      <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
      <button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
        <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path></svg>
      </button>
      You can't perform that action at this time.
    </div>


      
      
      
      
      
        

      
    <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
      <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
      <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="SVG 控件 · d3_d3 Wiki_files/SVG 控件 · d3_d3 Wiki.html">Reload</a> to refresh your session.</span>
      <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="SVG 控件 · d3_d3 Wiki_files/SVG 控件 · d3_d3 Wiki.html">Reload</a> to refresh your session.</span>
    </div>
    <div class="facebox" id="facebox" style="display:none;">
  <div class="facebox-popup">
    <div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
    </div>
    <button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path></svg>
    </button>
  </div>
</div>

  


</body></html>